<template>
  <div id="userAchievement">
    <div class="userMaterialTitle">
      <h2 class="active">我的成就 <span></span></h2>
    </div>
    <div class="userAchievementContent">
      <ul>
        <li v-for="(item, index) in achieveListData" :key="index">
          <img :src="$globalImageUrl + item.image" alt="">
          <p class="ellipse">{{item.title}}</p>
          <button @click="delAchievement(item.id)">删除</button>
        </li>
        <li>
          <label @click="uploadAchievemenPopupFlag = true">
            <img src="../../assets/img/user/add_upload.png" alt="">
          </label>
        </li>
      </ul>
    </div>
    <popup v-model="uploadAchievemenPopupFlag" position="top" @on-hide="onUploadAchievemenPopup()">
      <div class="userAchievemenPopup">
        <div class="userApprovePopupTitle">
          <h2>上传成就</h2>
          <i @click="uploadAchievemenPopupFlag = false">x</i>
        </div>
        <div class="userAchievemenPopupContent">
          <h2>标题： <input type="text" placeholder="请输入成就标题" v-model="achieveTitle"></h2>
          <textarea name="" placeholder="请输入成就描述" v-model="achieveIntroduce"></textarea>
          <label for="uploadAchievementId">
            <img :src="uploadAchievemenPopupImg" alt="">
            <input type="file" id="uploadAchievementId" v-show="false" accept="image/*" @change="onUploadAchievement($event)">
          </label>
          <div class="userAchievemenPopupButton">
            <div class="btnBox">
              <button class="btnDef" @click="handUploadAchievemen()">确定</button>
              <button class="btnDef btnClose" @click="uploadAchievemenPopupFlag = false">取消</button>
            </div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup } from 'vux'

export default {
  name: 'userAchievement',
  data () {
    return {
      uploadAchievemenPopupFlag: false,
      uploadAchievemenPopupImg: require('../../assets/img/user/add_upload.png'),
      achieveTitle: '',
      achieveIntroduce: '',
      achieveFileImage: '',
      achieveListData: []
    }
  },
  components: {
    Popup
  },
  created () {
    this.fetchAchieve()
  },
  methods: {
    // 选择成就图片
    onUploadAchievement (e) {
      if (e.target.files[0].size >= 1024 * 1024 * 2) {
        this.$vux.toast.text('上传图片不能大于2MB')
        return
      }
      this.achieveFileImage = e.target.files[0]
      var reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      // onload为读取后的回调函数
      reader.onload = (e) => {
        this.uploadAchievemenPopupImg = e.target.result
      }
    },
    // 上传成就弹框隐藏函数
    onUploadAchievemenPopup () {
    },
    // 上传成就接口
    handUploadAchievemen () {
      this.$api.postAddAchieve({
        userId: this.$store.state.user.userId,
        title: this.achieveTitle,
        introduce: this.achieveIntroduce,
        image: this.uploadAchievemenPopupImg
      }).then(res => {
        if (res.code === 0) {
          this.fetchAchieve()
          this.uploadAchievemenPopupFlag = false
        }
      })
    },
    // 删除成就
    delAchievement (id) {
      if (this.$store.state.user.userInfo.userType == 2) {
        var type = 0
      } else if (this.$store.state.user.userInfo.userType == 3) {
        var type = 1
      }
      this.$api.postdelAchieve({
        userId: this.$store.state.user.userId,
        type: type,
        id: id
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$vux.toast.text(res.msg)
          this.fetchAchieve()
        }
      })
    },
    // 获取成就列表
    fetchAchieve () {
      this.$api.getAchieve({
        userId: this.$store.state.user.userId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          this.achieveListData = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .vux-popup-dialog.vux-popup-top {
  width: 8rem;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}
#userAchievement{
  .userAchievementContent{
    padding: .2rem;
    ul{
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      li:nth-child(5n) {
        margin-right: 0;
      }
      li{
        margin: 0 .275rem .2rem 0;
        width: 1.5rem;
        button{
          width: 100px;
          border-radius: 5px;
          background-color: #15A29C;
          color: #fff;
          outline: none;
          margin-left: 20px;
          margin-top: 10px;
        }
        img{
          display: inline-block;
          width: 1.5rem;
          height: 1.5rem;
        }
        p{
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          text-align: center;
          margin-top: .1rem;
        }
        label{
          background-color: #fff;
          border: 1px solid #ccc;
          display: inline-block;
          width: 1.5rem;
          height: 1.5rem;
          img{
            width: 100%;
            height: 100%;
            display: inline-block;
            background-color: #fff;
          }
        }
      }
    }
  }
  .userAchievemenPopup{
    background-color: #fff;
    .userApprovePopupTitle{
      background-color: #15A29C;
      padding: .15rem .2rem;
      h2{
        font-size: .2rem;
        font-weight: 500;
        color: #fff;
        line-height: .28rem;
        display: inline-block;
      }
      i{
        font-style: normal;
        color: #fff;
        float: right;
        width: .25rem;
        text-align: center;
      }
    }
    .userAchievemenPopupContent{
      padding: .2rem;
      h2{
        font-size: .18rem;
        font-weight: 500;
        color: #333;
        line-height: .26rem;
        padding-bottom: .2rem;
        input{
          font-size: .18rem;
          font-weight: 500;
          color: #333;
          line-height: .26rem;
        }
      }
      textarea{
        font-size: .16rem;
        font-weight: 500;
        color: #333;
        line-height: .24rem;
        width: 100%;
        border: 1px solid #eee;
        height: 2rem;
      }
      label{
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        img{
          width: 100%;
          height: 100%;
          display: inline-block;
          background-color: #fff;
        }
      }
      .userAchievemenPopupButton{
        text-align: right;
        height: .42rem;
        margin-top: .2rem;
        .btnBox{
          width: 2rem;
          float: right;
          .btnClose{
            margin-left: .2rem;
          }
        }
      }
    }
  }
}
</style>
